<template>
  <div id="addMoviePage">
    <h2 style="margin-bottom: 32px" v-if="!props.id">创建电影</h2>
    <h2 style="margin-bottom: 32px" v-else>编辑电影</h2>
    <el-form
      :model="form"
      :style="{ width: '480px', margin: '0 auto' }"
      label-align="left"
      auto-label-width
    >
      <el-form-item field="movieId" label="电影">
        <el-select v-model="form.movieId" placeholder="请选择电影">
          <el-option
            v-for="value of movieList"
            :key="value.id"
            :value="value.id"
            :label="value.movieName"
          />
        </el-select>
      </el-form-item>
      <el-form-item field="theaterId" label="影院">
        <el-select v-model="form.theaterId" placeholder="请选择影院">
          <el-option
            v-for="value of theaterList"
            :key="value.id"
            :value="value.id"
            :label="value.theaterName"
          />
        </el-select>
      </el-form-item>
      <el-form-item field="price" label="电影票价">
        <el-input
          type="number"
          v-model="form.price"
          placeholder="请输入电影票价"
        />
      </el-form-item>
      <el-form-item field="showTime" label="电影上映日期">
        <el-date-picker
          v-model="form.showTime"
          type="datetime"
          placeholder="请输入电影上映日期"
          :size="'default'"
        />
      </el-form-item>
      <el-form-item field="languageType" label="语言类型">
        <el-select v-model="form.languageType" placeholder="请选择语言类型">
          <el-option
            v-for="(value, key) of LANGUAGE_TYPE_MAP"
            :key="value"
            :value="Number(key)"
            :label="value"
          />
        </el-select>
      </el-form-item>
      <el-form-item field="hallType" label="影厅类型">
        <el-select v-model="form.hallType" placeholder="请选择影厅类型">
          <el-option
            v-for="(value, key) of HALL_TYPE_MAP"
            :key="value"
            :value="Number(key)"
            :label="value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit" style="width: 120px"
          >提交
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watchEffect } from "vue";
import API from "@/api";
import { useLoginUserStore } from "@/store/userStore";
import { useRouter } from "vue-router";
import { withDefaults, defineProps } from "vue";
import { ElMessage } from "element-plus";
import { HALL_TYPE_MAP, LANGUAGE_TYPE_MAP } from "@/constant/movie";
import {
  addMovieShowUsingPost,
  getMovieShowVoByIdUsingGet,
  updateMovieShowUsingPost,
} from "@/api/movieShowController";
import {
  listMovieByPageUsingPost,
  listMovieVoByPageUsingPost,
} from "@/api/movieController";
import Movie = API.Movie;
import { listTheaterByPageUsingPost } from "@/api/theaterController";

const loginUserStore = useLoginUserStore();
const router = useRouter();

interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => {
    return "";
  },
});

const old = ref<API.MovieShowVO>();

const form = ref({
  showTime: "",
  languageType: 0,
  hallType: 0,
  price: 0,
} as API.MovieShowQueryRequest);

/**
 * 加载数据
 */
const loadData = async () => {
  if (!props.id) {
    return;
  }
  const res = await getMovieShowVoByIdUsingGet({
    id: props.id as any,
  });
  if (res.data.code === 0 && res.data.data) {
    old.value = res.data.data as any;
    form.value = res.data.data;
  } else {
    ElMessage({
      message: "获取数据失败，" + res.data.message,
      type: "error",
    });
  }
};
/**
 * 加载movie数据
 */
const movieList = ref<API.MovieVO[]>([]);
const loadMovieData = async () => {
  const res = await listMovieByPageUsingPost({
    pageSize: 1000,
  });
  if (res.data.code === 0 && res.data.data) {
    movieList.value = res.data.data.records as any;
  } else {
    ElMessage({
      message: "获取数据失败，" + res.data.message,
      type: "error",
    });
  }
};
/**
 * 加载theater数据
 */
const theaterList = ref<API.TheaterVO[]>([]);
const loadTheaterData = async () => {
  const res = await listTheaterByPageUsingPost({
    pageSize: 1000,
    sortField: "updateTime",
  });
  if (res.data.code === 0 && res.data.data) {
    theaterList.value = res.data.data.records as any;
  } else {
    ElMessage({
      message: "获取数据失败，" + res.data.message,
      type: "error",
    });
  }
};
watchEffect(() => {
  loadData();
  loadMovieData();
  loadTheaterData();
});

const handleSubmit = async () => {
  let res: any;
  //判断是否是更新操作
  if (props.id) {
    res = await updateMovieShowUsingPost({
      id: props.id as any,
      ...form.value,
    });
  } else {
    res = await addMovieShowUsingPost(form.value);
  }

  if (res.data.code === 0) {
    ElMessage({
      message: "操作成功",
      type: "success",
    });
    setTimeout(() => {
      router.push(`/`);
    }, 3000);
  } else {
    ElMessage({
      message: "操作失败，" + res.data.message,
      type: "error",
    });
  }
};
</script>
